import {
  uploadFileHeader,
  uploadFileUrl
} from '@/service/modules/file/upload-file'
import {
  FormRules,
  NButton,
  NCard,
  NForm,
  NFormItem,
  NInput,
  NRadio,
  NRadioGroup,
  NSpace,
  NUpload
} from 'naive-ui'
import { defineComponent, reactive, toRefs } from 'vue'

const HiveDatasourceCard = defineComponent({
  name: 'HiveDatasourceCard',
  props: {
    datasourceInfo: {
      type: Object,
      required: false
    }
  },
  emits: ['formDataChange'],
  setup() {
    const state = reactive({
      datasourceForm: {
        name: '',
        description: '',
        host: '',
        port: '',
        dbName: '',
        username: '',
        password: '',
        other: '',
        driver: '',
        keytabUrl: '',
        krb5ConfUrl: '',
        isSys: false
      },
      rules: {
        name: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.datasourceForm.name === '') {
              return new Error(window.$t('dataManage.datasourceNameTips'))
            }
          }
        },
        host: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.datasourceForm.host === '') {
              return new Error(window.$t('dataManage.hostTips'))
            }
          }
        }
      } as FormRules
    })
    return {
      ...toRefs(state)
    }
  },
  watch: {
    //监听表单值变化 实时传递到父窗口
    datasourceForm: {
      handler(newValue) {
        const formDisabled =
          this.datasourceForm.name === '' || this.datasourceForm.host === ''
        this.$emit('formDataChange', newValue, formDisabled)
      },
      deep: true
    }
  },
  mounted() {
    if (this.datasourceInfo) {
      this.datasourceForm.name = this.datasourceInfo.name
      this.datasourceForm.description = this.datasourceInfo.description
      this.datasourceForm.host = this.datasourceInfo.host
      this.datasourceForm.port = this.datasourceInfo.port
      this.datasourceForm.dbName = this.datasourceInfo.dbName
      this.datasourceForm.username = this.datasourceInfo.username
      this.datasourceForm.password = this.datasourceInfo.password
      this.datasourceForm.other = this.datasourceInfo.other
      this.datasourceForm.driver = this.datasourceInfo.driver
      this.datasourceForm.keytabUrl = this.datasourceInfo.keytabUrl
      this.datasourceForm.krb5ConfUrl = this.datasourceInfo.krb5ConfUrl
      this.datasourceForm.isSys = this.datasourceInfo.isSys
    }
  },
  methods: {
    handleKeyTabUploadFinish({ event }: { event?: ProgressEvent }) {
      const res = JSON.parse((event?.target as XMLHttpRequest).response)
      if (res.resp_code === 0) {
        this.datasourceForm.keytabUrl = res.data.url
      } else {
        window.$message.error(res.resp_msg)
      }
    },
    handleKrb5ConfUploadFinish({ event }: { event?: ProgressEvent }) {
      const res = JSON.parse((event?.target as XMLHttpRequest).response)
      if (res.resp_code === 0) {
        this.datasourceForm.krb5ConfUrl = res.data.url
      } else {
        window.$message.error(res.resp_msg)
      }
    }
  },
  render() {
    return (
      <NCard bordered={false} content-style='padding:0'>
        <NForm
          rules={this.rules}
          label-placement='left'
          require-mark-placement='right-hanging'
          label-width='auto'
        >
          <NFormItem path='name' label={window.$t('dataManage.datasourceName')}>
            <NInput
              type='text'
              v-model={[this.datasourceForm.name, 'value']}
              placeholder={window.$t('dataManage.datasourceNameTips')}
            />
          </NFormItem>
          <NFormItem
            path='description'
            label={window.$t('dataManage.description')}
          >
            <NInput
              type='textarea'
              v-model={[this.datasourceForm.description, 'value']}
            />
          </NFormItem>
          <NFormItem path='host' label={window.$t('dataManage.host')}>
            <NInput
              type='text'
              v-model={[this.datasourceForm.host, 'value']}
              placeholder={window.$t('dataManage.hostTips')}
            />
          </NFormItem>
          <NFormItem path='port' label={window.$t('dataManage.port')}>
            <NInput type='text' v-model={[this.datasourceForm.port, 'value']} />
          </NFormItem>
          <NFormItem path='dbName' label={window.$t('dataManage.dbName')}>
            <NInput
              type='text'
              v-model={[this.datasourceForm.dbName, 'value']}
            />
          </NFormItem>
          <NFormItem path='username' label={window.$t('dataManage.username')}>
            <NInput
              type='text'
              v-model={[this.datasourceForm.username, 'value']}
            />
          </NFormItem>
          <NFormItem path='password' label={window.$t('dataManage.password')}>
            <NInput
              type='password'
              v-model={[this.datasourceForm.password, 'value']}
            />
          </NFormItem>
          <NFormItem path='keytabUrl' label={window.$t('dataManage.keytab')}>
            <NUpload
              action={uploadFileUrl}
              headers={uploadFileHeader()}
              onFinish={this.handleKeyTabUploadFinish}
            >
              <NButton type='info' size='tiny'>
                {window.$t('dataManage.uploadKeytab')}
              </NButton>
            </NUpload>
          </NFormItem>
          <NFormItem
            path='krb5ConfUrl'
            label={window.$t('dataManage.krb5Conf')}
          >
            <NUpload
              action={uploadFileUrl}
              headers={uploadFileHeader()}
              onFinish={this.handleKrb5ConfUploadFinish}
            >
              <NButton type='info' size='tiny'>
                {window.$t('dataManage.uploadKeytab')}
              </NButton>
            </NUpload>
          </NFormItem>
          <NFormItem path='driver' label={window.$t('dataManage.driver')}>
            <NInput
              type='text'
              v-model={[this.datasourceForm.driver, 'value']}
            />
          </NFormItem>
          <NFormItem path='other' label={window.$t('dataManage.other')}>
            <NInput
              type='textarea'
              v-model={[this.datasourceForm.other, 'value']}
            />
          </NFormItem>
          <NFormItem path='isSys' label={window.$t('dataManage.isSys')}>
            <NRadioGroup
              v-model={[this.datasourceForm.isSys, 'value']}
              name='sexGroup'
            >
              <NSpace>
                <NRadio value={true}>{window.$t('common.yes')}</NRadio>
                <NRadio value={false}>{window.$t('common.no')}</NRadio>
              </NSpace>
            </NRadioGroup>
          </NFormItem>
        </NForm>
      </NCard>
    )
  }
})

export default HiveDatasourceCard
